<template>
	<view class="page-view">
		<nav-view :defaultShow="true" ></nav-view>
		<view class="page-conte">
			<view class="search-view-box">
				<view class="search-top-box is-flex">
					<i class="iconfont icon-jindunlogo-01"></i>
					<text class="name">金盾</text>
				</view>
				<view class="search-conte-box is-flex">
					<i class="iconfont icon-sousuo-01"></i>
					<input class="input" @blur="searchBlur" :value="keywords" type="text" placeholder="请描述您的法律问题">
				</view>
			</view>
			<!-- 内容 -->
			<view class="answer-box">
				<view class="tab-view-box is-flex">
					<view class="item" :class="tabIndex == index?'active':''" v-for="(item,index) in tabList" @click="touchTab(index)" :key="index">
						{{item}}
					</view>
				</view>
				<!-- 答案 -->
				<view class="answer-conte" v-if="tabIndex == 0">
					<view class="conte-box" v-if="issuesInfo != null">
						<div class="pt" >
							{{issuesInfo.article_content}}
							<!-- <view v-html="issuesInfo.article_content"></view> -->
						</div>
						
						<div class="state-box is-flex">
							<div class="state-item" @click="handleCollect()">
								<img class="icon" src="@/static/images/icon-sc.png" alt="" v-if="!is_collect">
								<img class="icon" src="@/static/images/icon-sc-active.png" alt="" v-if="is_collect">
								<text>收藏</text>
							</div>
							<div class="state-item" @click="handleUseful(1)">
								<img class="icon" src="@/static/images/icon-you.png" alt="" v-if="useful != 1">
								<img class="icon" src="@/static/images/icon-you-active.png" alt="" v-if="useful == 1">
								<text>有用</text>
							</div>
							<div class="state-item" @click="handleUseful(2)">
								<img class="icon" src="@/static/images/icon-mei.png" alt="" v-if="useful != 2">
								<img class="icon" src="@/static/images/icon-mei-active.png" alt="" v-if="useful == 2">
								<text>没用</text>
							</div>
						</div>
					</view>
					<view class="no-data conte-box" v-else>
						没有搜索到数据
					</view>
					
				</view>
				<!-- 相似问题 -->
				<view class="answer-conte" v-if="tabIndex == 1">
					<div class="conte-box" v-if="issuesList.length > 0">
						<view class="search-list">
							<view class="search-item is-flex" v-for="(item,index) in issuesList" :key="index" @click="touchToWen(item)">
								<text class="conte u-line-3">{{item.article_title}}</text>
								<i class="iconfont icon-tiaozhuan-01"></i>
							</view>
						</view>
					</div>
					<view class="no-data conte-box" v-else>
						没有搜索到数据
					</view>
					
				</view>
				<!-- 相似问题 -->
				<view class="answer-conte" v-if="tabIndex == 2">
					<div class="conte-box" v-if="casesList.length > 0">
						<view class="search-list">
							<view class="search-item" v-for="(item,index) in casesList" :key="index" @click="touchToAnli(item)">
								<text class="title">{{item.court_name}}{{item.judgment_date}}</text>
								<text class="conte2 u-line-2">{{item.article_title}}</text>
								
							</view>
						</view>
					</div>
					<view class="no-data conte-box" v-else>
						没有搜索到数据
					</view>
				</view>
				
			</view>
			<view class="consult-wrap" @click="gotoConsult">
				<img class="consult-icon" src="@/static/images/icon-header.png" alt="">
				<!-- <view class="consult-tip">点击咨询</view> -->
			</view>
		</view>
		<u-loading-icon :show="loading" color="#232DA7" text="Loading..." textSize="14" size="60" :vertical="true"></u-loading-icon>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:['AI作画生成的图片和作品，版权归谁','教育培训机构涉嫌诈骗该怎么办?','葛优打“葛优躺”官司获赔759万，肖像权是什么','消费者权益有哪些','银行倒闭存款怎么办','AI作画生成的图片和作品，版权归谁','教育培训机构涉嫌诈骗该怎么办?','葛优打“葛优躺”官司获赔759万，肖像权是什么','消费者权益有哪些','银行倒闭存款怎么办','AI作画生成的图片和作品，版权归谁','教育培训机构涉嫌诈骗该怎么办?','葛优打“葛优躺”官司获赔759万，肖像权是什么','消费者权益有哪些','银行倒闭存款怎么办'],
				list2:[
					{name:'佛山市顺德区人民法院 2017-02-28',conte:'常州兰智电子科技有限公司与佛山市冉智电炉制造有限公司买卖合同纠纷一审民事判决书'},
					{name:'合肥市庐阳区人民法院2014-07-28',conte:'中国银行股份有限公司安徽省分行与合肥三晶电子有限公司、合肥瑞江传感科技有限公司金融借款合同纠纷一审民事判决书14-2-904'},
					{name:'深圳市龙岗区人民法院2013-03-26',conte:'XXAI与福某某抚养费纠纷执行执行裁定书'}
				],
				tabList:['回答','相似问题','相关案例'],
				tabIndex:0,
				collected:false,
				like:false,
				useless:false,
				stateList:[
					{name:'收藏',icon:require("@/static/images/icon-sc.png"),activeIcon:require("@/static/images/icon-sc-active.png"),selected:false},
					{name:'有用',icon:require("@/static/images/icon-you.png"),activeIcon:require("@/static/images/icon-you-active.png"),selected:false},
					{name:'没用',icon:require("@/static/images/icon-mei.png"),activeIcon:require("@/static/images/icon-mei-active.png"),selected:false},
				],
				loading:false,
				keywords:'',
				issuesInfo:{},
				issuesList:[],
				casesList:[],
				is_collect:false,
				loadding:false,
				useful:0
			}
			
		},
		onLoad(e) {
			console.log(e.keywords);
			this.keywords = e.keywords;
			this.init();
		},
		methods:{
			init(){
				let self = this;
				self._get('issues.issues/searchIssuesByKeywords', {keywords:this.keywords}, function(res) {
					// self.tabList = res.data.tabList;
					self.issuesInfo = res.data.issuesInfo;
					self.issuesList = res.data.issuesList;
					self.casesList = res.data.casesList;
					self.is_collect = res.data.is_collect;
				});
			},
			click(){
				
			},
			touchDelete(){
				this.show = true
			},
			problemConfirm(){
				this.show = false
				console.log("确认")
			},
			touchTab(index){
				this.tabIndex = index
			},
			toucSelect(index){
				this.stateList[index].selected = !this.stateList[index].selected
			},
			touchToAnli(item){
				uni.navigateTo({
					url:'/pages/award/index?case_id=' + item.article_id
				})
			},
			touchToWen(item){
				this.keywords = item.article_title;
				this.init();
				// uni.navigateTo({
				// 	url:'/pages/onlineMessage/index'
				// })
			},
			searchBlur(){
				this.loading = true
				setTimeout(()=>{
					this.loading = false
				},500)
			},
			handleCollect(){
				let self = this;
				// uni.showLoading({
				// 	title: '加载中'
				// });
				// self.loading = true;
				let article_id = self.issuesInfo['article_id'];
				self._get(
					'cases.cases/handleCollect',
					{
						article_id: article_id,
						type:1
					},
					function(res) {
						self.is_collect = res.data.is_collect;
						// self.loading = true;
						// uni.hideLoading();
					}
				);
			},
			handleUseful(flag){
				let self = this;
				// uni.showLoading({
				// 	title: '加载中'
				// });
				// self.loading = true;
				let article_id = self.issuesInfo['article_id'];
				self._get(
					'issues.issues/handleUseful',
					{
						article_id: article_id,
						type:flag
					},
					function(res) {
						self.useful = res.data.useful;
						// self.loading = true;
						// uni.hideLoading();
					}
				);
			},
			gotoConsult(){
				uni.navigateTo({
					url:'/pages/onlineMessage/index?title='+this.keywords+'&article_id=' + this.issuesInfo['article_id']
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-conte {
		padding: 20upx 40upx 40upx;
	}
	.title-h2 .icon {
		width: 120upx;
		height: 86upx;
	}
	// 搜索框
	.search-view-box {
		width: 100%;
		z-index: 10;
		margin-top: 16upx;
	}
	.icon-yy {
		position: absolute;
		right: 0;
		bottom: 0;
		margin-bottom: -20upx;
		z-index: 12;
		width: 87upx;
	}
	.search-top-box {
		width: 169upx;
		height: 69upx;
		background: #232DA7;
		border-radius: 13upx 13upx 0upx 0upx;
		justify-content: center;
		font-size: 35upx;
		color: #fff;
		line-height: 50upx;
	}
	.search-top-box .iconfont {
		font-size: 50upx;
		margin-right: 5upx;
	}
	.search-conte-box {
		height: 106upx;
		border-radius: 0rpx 13rpx 13rpx 13rpx;
		border: 4rpx solid #232DA7;
		padding: 0 34upx;
		background-color: #fff;
	}
	.search-conte-box .iconfont {
		font-size: 55upx;
	}
	.search-conte-box .input {
		flex: 1;
		padding-left: 30upx;
	}
	.history-search-box {
		margin-top: 50upx;
	}
	.title-view-box {
		padding: 0 35upx 0 40upx;
	}
	.title-view-box .title {
		width: 162upx;
		height: 58upx;
	}
	.title-view-box .delete {
		width: 30upx;
		height: 30upx;
	}
	/deep/ .u-loading-icon {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	
	.tab-view-box {
		padding: 20upx 0;
	}
	.tab-view-box .item {
		width: 33.333333%;
		text-align: center;
		line-height: 80upx;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		color: #666666;
	}
	.tab-view-box .item.active {
		color: #232DA7;
		font-weight: bold;
	}
	.conte-box {
		margin-top: 26upx;
		background: #FFFFFF;
		border-radius: 13rpx;
		border: 1rpx solid #707070;
		padding: 40rpx 40rpx 20rpx;
	}
	.conte-box .pt {
		font-size: 27rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #333333;
	}
	.state-box {
		margin-top: 40upx;
		justify-content: center;
	}
	.state-item {
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #999999;
		margin: 0 45upx;
	}
	.state-item .icon {
		width: 42rpx;
		height: 40rpx;
	}
	.state-item text {
		display: block;
	}
	
	.search-item {
		justify-content: flex-start;
		padding: 30upx 0;
		border-bottom: 1upx solid #EDEDED;
		align-items: initial;
		
	}
	.search-list .search-item:last-child {
		border-bottom: none;
	}
	.search-item .conte {
		flex: 1;
		font-size: 27upx;
		color: #333;
	}
	.search-item .iconfont {
		font-size: 40upx;
		margin-right: 5upx;
	}
	.search-item .icon-sousuo-01 {
		margin-right: 30upx;
	}
	.search-item .title {
		font-size: 27rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #999999;
		margin-bottom: 26rpx;
	}
	.search-item .conte2 {
		font-size: 27upx;
		color: #333;
	}
	.consult-wrap{
		width: 100rpx;
		height: 100rpx;
		position:fixed;
		bottom: 20rpx;
		right: 10px;
	}
	.consult-icon{
		width: 100%;
		height: 100%;
	}
	
	
</style>